import React from 'react';
import './Mydetail.css';
import { Picker,List,DatePicker } from 'antd-mobile';
import Topbar from '../../components/Topbar/Topbar';

const male = [
    {
        label:(<span>女</span>),
        value: '女',
    },
    {
        label:(<span>男</span>),
        value: '男',
    },
    {
        label:(<span>无</span>),
        value: '无',
    },
];
  
class MyDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type:this.props.location.state.type,
            data: [],
            id:localStorage.getItem('userid'),

            maleValue:'',
            date:'',
            sentence:'',
        };
    }

    async componentDidMount() {
        
    }

    render() {
        if(this.state.type == 'name'){
            return (     
                <div className="mydetail-name">
                    <Topbar name="修改昵称" color="#95D2AA" />
                    <input type="text" id="user-name" autoComplete="off"/>
                    <p style={{color:'#888',margin:'6px 5%'}}>4-30个字符，支持中英文、数字</p>
                    <p style={{color:'#888',margin:'6px 5%'}}>好的昵称可以让大家更容易记住你</p>
                    <button 
                        style={{width:'100%',height:'50px',backgroundColor:'#95D2AA',border:'none',borderRadius:'25px',marginTop:'20px'}}
                        onClick={()=>{
                            const userName = document.getElementById("user-name").value
                            //将名字存在本地中
                            localStorage.setItem("username",userName);
                            //将名字存在用户表中
                            const nameParam={
                                name: userName
                            }
                            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                                method: 'PUT',
                                body: JSON.stringify(nameParam),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                            })
                            window.history.back(-1);
                        }}
                    >确定</button>
                </div>
            )
        } 
        if(this.state.type == 'tel'){
            return (     
                <div className="mydetail-name">
                    <Topbar name="修改手机号" color="#95D2AA" />
                    <input type="text" id="user-tel" autoComplete="off"/>
                    <p style={{color:'#888',margin:'6px 5%'}}>11位手机号，请符合手机号的规范</p>
                    <p style={{color:'#888',margin:'6px 5%'}}>绑定手机号方便快捷登陆</p>
                    <button 
                        style={{width:'100%',height:'50px',backgroundColor:'#95D2AA',border:'none',borderRadius:'25px',marginTop:'20px'}}
                        onClick={()=>{
                            const userTel = document.getElementById("user-tel").value
                            //将手机号码存在本地中
                            localStorage.setItem("usertel",userTel);
                           //将手机号码存在用户表中
                           const telParam={
                                tel: userTel
                            }
                            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                                method: 'PUT',
                                body: JSON.stringify(telParam),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                            })
                            window.history.back(-1);
                        }}
                    >确定</button>
                </div>
            )
        }
        if(this.state.type == 'male'){
            return (     
                <div className="mydetail-male">
                    <Topbar name="修改性别" color="#95D2AA" />
                    <div style={{width:'100%',height:'20px'}}></div>
                    <Picker
                        data={male}
                        value={this.state.maleValue}
                        cols={1}
                        onChange={v => {
                            console.log(v)
                            this.setState({ maleValue: v })
                        }}
                    >
                    <List.Item arrow="horizontal" className='my-info'>性别：</List.Item>
                    </Picker>
                    <button 
                        style={{width:'100%',height:'50px',backgroundColor:'#95D2AA',border:'none',borderRadius:'25px',marginTop:'20px'}}
                        onClick={()=>{
                            console.log(this.state.maleValue)
                            //将性别存在用户表中
                            const maleParam={
                                male: this.state.maleValue
                            }
                            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                                method: 'PUT',
                                body: JSON.stringify(maleParam),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                            })
                            window.history.back(-1);
                        }}
                    >确定</button>
                </div>
            )
        } 
        if(this.state.type == 'birth'){
            return (     
                <div className="mydetail-tel">
                    <Topbar name="修改日期" color="#95D2AA" />
                    <div style={{width:'100%',height:'20px'}}></div>
                    <DatePicker
                        mode="date"
                        title="选择日期"
                        extra="请选择"
                        value={this.state.date}
                        onChange={date => this.setState({ date })}
                        minDate={new Date(1990, 0, 1, 0, 0, 0)}
                        maxDate={new Date(2021, 5, 23, 23, 59, 59)}
                    >
                        <List.Item arrow="horizontal">日期</List.Item>
                    </DatePicker>
                    <p style={{color:'#888',margin:'6px 5%'}}>选择生日日期，让更多的人认识你</p>
                    <button 
                        style={{width:'100%',height:'50px',backgroundColor:'#95D2AA',border:'none',borderRadius:'25px',marginTop:'20px'}}
                        onClick={()=>{
                            console.log(this.state.date.toLocaleDateString())
                            //将生日存在本地中
                            localStorage.setItem("userbirth",this.state.date.toLocaleDateString());
                            //将生日存在用户表中
                            const birthParam={
                                birth: this.state.date.toLocaleDateString()
                            }
                            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                                method: 'PUT',
                                body: JSON.stringify(birthParam),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                            })
                            window.history.back(-1);
                        }}
                    >确定</button>
                </div>
            )
        } 
        if(this.state.type == 'mail'){
            return (     
                <div className="mydetail-name">
                    <Topbar name="修改邮箱" color="#95D2AA" />
                    <input type="text" id="user-mail" autoComplete="off"/>
                    <p style={{color:'#888',margin:'6px 5%'}}>请输入邮箱地址，符合邮箱地址的规范</p>
                    <p style={{color:'#888',margin:'6px 5%'}}>写下邮箱地址，遇到心灵契合的好友</p>
                    <button 
                        style={{width:'100%',height:'50px',backgroundColor:'#95D2AA',border:'none',borderRadius:'25px',marginTop:'20px'}}
                        onClick={()=>{
                            const userMail = document.getElementById("user-mail").value
                            //将邮箱存在本地中
                            localStorage.setItem("useremail",userMail);
                            //将邮箱存在用户表中
                            const mailParam={
                                email: userMail
                            }
                            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                                method: 'PUT',
                                body: JSON.stringify(mailParam),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                            })
                            window.history.back(-1);
                        }}
                    >确定</button>
                </div>
            )
        }
        if(this.state.type == 'sentence'){
            return (     
                <div className="mydetail-name">
                    <Topbar name="修改签名" color="#95D2AA" />
                    <textarea placeholder="介绍一下自己，让大家了解和关注你：）" style={{width:'95%',height:'250px',border:'none',padding:'6px'}}
                        onChange={(e)=>{
                            this.setState({
                                sentence:e.target.value 
                            })
                        }}/>
                    <button 
                        style={{width:'100%',height:'50px',backgroundColor:'#95D2AA',border:'none',borderRadius:'25px',marginTop:'20px'}}
                        onClick={()=>{
                            console.log(this.state.sentence)
                            //将签名存在用户表中
                            const sentenceParam={
                                sentence: this.state.sentence
                            }
                            fetch(`https://www.prebeauty.work/user/${this.state.id}`, {
                                method: 'PUT',
                                body: JSON.stringify(sentenceParam),
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                            })
                            .then((res) => res.json() )
                            .then((res) => {
                                console.log(res);
                            })
                            window.history.back(-1);
                        }}
                    >确定</button>
                </div>
            )
        }    
    }
}

export default MyDetail